<template>
	<view class="p-bot60 p-top30" :style="{ '--color': color }">
		<view class="Onfo">
			<image :src="$imgUrls(site_time.img)" mode="aspectFill" class="Img"></image>
			<view class="TxtOnfo">
				<text class="black size30">{{ site_time.name }}</text>
				<text class="Time">购买时间：{{ info.add_time }}</text>
				<text class="Time">开宴时间：{{ site_time.open_date_time }}</text>
			</view>
			<text class="Waiting stateTXT a-self-start" v-if="info.state == 1">待使用</text>
			<text class="color_ff2 stateTXT a-self-start" v-if="info.state == 3">待付尾款</text>
			<text class="used stateTXT a-self-start" v-if="info.state == 2">已使用</text>
			<text class="expiredbg stateTXT a-self-start" v-if="info.state == 4">已过期</text>
		</view>

		<view class="content">
			<view class="black size30">预约信息</view>
			<view class="List">
				<text class="title">预约单号</text>
				<text class="title">{{ info.scan_order_code }}</text>
			</view>
			<view class="List">
				<text class="title">预约日期</text>
				<text class="title">{{ info.add_time }}</text>
			</view>
			<view class="List">
				<text class="title">联系人</text>
				<text class="title">{{ info.user_name }}</text>
			</view>
			<view class="List">
				<text class="title">联系电话</text>
				<text class="title">{{ info.user_tel }}</text>
			</view>
		</view>

		<view class="banquet">
			<view class="black size30 p-left20">座席信息</view>
			<view class="banList bot" v-for="(item, index) in info.sites_detail" :key="index">
				<view class="row j-sb a-center">
					<view class="d-flex a-center">
						<text class="NumLock">{{ index + 1 }}</text>
						<view class="Bnakine">{{ item.type_name }}-{{ item.name }}</view>
					</view>

					<!-- 6142 秀宴 -->
					<template v-if="info.bid != '6142'">
						<view class="d-flex a-center" v-if="info.state != 1">
							<text class="securities">美团劵</text>
							<u-switch
								:disabled="info.state == 2"
								v-model="item.use_coupon"
								size="18"
								inactiveColor="#cccccc"
								activeColor="#2aa515"
								:activeValue="1"
								:inactiveValue="0"
								@change="changeCcoupon($event, index)">
							</u-switch>
						</view>
					</template>
				</view>

				<view class="bnaid">
					<text class="title m-left30">{{ item.goods.name }}</text>
					<text class="title">定金：￥{{ item.order_price }}</text>
				</view>
				<view class="bnaid" v-if="item.make_up_price">
					<view class="d-flex a-center">
						<text class="title">妆造预约</text>
						<text class="title m-left20">{{ item.make_up_date_str }}</text>
					</view>
					<text class="title">￥{{ item.make_up_price }}</text>
				</view>
			</view>
		</view>

		<template v-if="info.bid != '6142'">
			<view class="favorable" v-if="refundNum > 0">
				<view class="black size30 p-left20">优惠抵扣</view>
				<view class="PriceList">
					<view class="bnaid">
						<text class="title">美团劵</text>
						<text class="title">X{{ refundNum }}</text>
					</view>
				</view>
			</view>
		</template>

		<view class="PriceInfo">
			<view class="black size30 p-left20">支付信息</view>
			<view class="PriceList">
				<view class="bnaid">
					<text class="title">定金</text>
					<text class="title">￥{{ info.order_price }}</text>
				</view>
				<view class="bnaid">
					<text class="title">其他费用</text>
					<text class="title">￥{{ info.make_up_price }}</text>
				</view>
				<view class="bnaid">
					<text class="title">{{ Copewith }}尾款</text>
					<text class="title">￥{{ info.tail_price }}</text>
				</view>
				<view class="bnaid" v-if="refundMony">
					<text class="color_ff2 size26">应退定金</text>
					<text class="color_ff2 size26">￥{{ refundMony }}</text>
				</view>
			</view>
		</view>

		<view class="row j-centert m-top50" v-if="info.state == 1 || info.state == 3 || info.state == 4">
			<view class="botBtn flexac size30" :class="isHexiao ? 'may' : 'nomay'" @click="continum">立即核销</view>
			<view class="botBtn flexac size30 may" @click="getLockOrder">刷新</view>
		</view>
	</view>
</template>
<!-- 0:待支付 1：已成单  2：已核销 3：待付尾款 4:已过期 5：已退款  6:退款中  99：已过时 -->
<script>
	import { Modal } from '@/common/utils'
	export default {
		data() {
			return {
				order_id: '',
				color: '#d7b06d',
				pageData: '',
				info: '',
				site_time: '',
				refundMony: '',
				refundNum: 0,
				disabled: false,
			}
		},
		onLoad(opt) {
			if (opt.id) this.order_id = opt.id
			this.getLockOrder()
		},
		methods: {
			getLockOrder() {
				this.$http
					.get({
						url: '/SiteApi/getLockOrder',
						data: {
							order_id: this.order_id,
						},
					})
					.then((res) => {
						if (res.code != 200) return this.$Toast(res.msg, 2)
						const Result = res.data
						this.pageData = Result
						this.info = Result.info
						this.site_time = Result.site_time
						if (Result.info.need_refuse_money) this.refundMony = Result.info.need_refuse_money
						if (Result.info.num) this.refundNum = Result.info.num
						if (Result.is_today === 1) return
						Modal({
							content: Result.today_msg,
							showCancel: false,
						})
					})
			},
			changeCcoupon(e, index) {
				let verification = []
				for (let item of this.info.sites_detail) {
					let obj = {
						id: item.id,
						use_coupon: item.use_coupon,
					}
					verification.push(obj)
				}
				this.$http
					.post({
						url: '/SiteApi/useCoupon',
						data: {
							order_id: this.order_id,
							verification: JSON.stringify(verification),
						},
					})
					.then((res) => {
						if (res.code != 200) return this.$Toast(res.msg)
						const Result = res.data
						this.refundMony = Result.need_refuse_money
						this.refundNum = Result.num ? Result.num : 0
						this.getLockOrder()
					})
			},

			continum() {
				if (!this.isHexiao) return
				this.$showLoading('')
				let verification = []
				for (let item of this.info.sites_detail) {
					let obj = {
						id: item.id,
						use_coupon: item.use_coupon,
					}
					verification.push(obj)
				}
				this.$http
					.post({
						url: '/SiteApi/verificationOrder',
						data: {
							order_id: this.order_id,
							verification: JSON.stringify(verification),
						},
					})
					.then((res) => {
						this.$hideLoading()
						if (res.code != 200) return this.$Toast(res.msg)
						this.$Toast(res.msg)
						this.disabled = true
						this.getLockOrder()
					})
			},
		},
		computed: {
			Copewith() {
				return this.info.state == 3 ? '应付' : ''
			},
			isHexiao() {
				return this.info.state == 1 || this.info.state == 4 || this.info.tail_price == 0
			},
		},
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f5ecda;
	}

	.Onfo {
		width: 690rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
	}
	.Img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}
	.TxtOnfo {
		flex: 1;
		display: flex;
		flex-direction: column;
	}
	.Time {
		color: #333;
		font-size: 30rpx;
		margin-top: 8rpx;
	}
	.stateTXT {
		font-size: 28rpx;
		margin-left: 20rpx;
	}
	.Waiting {
		color: #009933;
	}
	.used {
		color: #333;
	}
	.expiredbg {
		color: #bcbcbc;
	}
	.content {
		width: 690rpx;
		margin: 24rpx auto 0;
		background-color: #ffffff;
		padding: 20rpx;
		border-radius: 10rpx;
	}
	.List {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 24rpx;
	}
	.title {
		color: #333;
		font-size: 26rpx;
	}
	.contact {
		display: flex;
		align-items: center;
	}
	.CallInfo {
		color: #333;
		font-size: 24rpx;
		margin-left: 10rpx;
	}
	.banquet {
		width: 690rpx;
		margin: 24rpx auto 0;
		background-color: #ffffff;
		padding: 20rpx 0;
		border-radius: 10rpx;
	}
	.banList {
		width: 100%;
		padding: 24rpx 20rpx 24rpx 20rpx;
	}
	.PriceList {
		width: 100%;
		padding: 10rpx 20rpx;
	}
	.Bnakine {
		padding: 4rpx 14rpx;
		background-color: #fff2de;
		border-radius: 8rpx;
		font-size: 24rpx;
		border: 1rpx solid var(--color);
		color: var(--color);
		display: inline-block;
	}
	.bnaid {
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 0 20rpx;
		margin-top: 20rpx;
	}
	.PriceInfo {
		width: 690rpx;
		margin: 24rpx auto 0;
		background-color: #ffffff;
		padding: 20rpx 0;
		border-radius: 10rpx;
	}
	.botBtn {
		width: 240rpx;
		height: 76rpx;

		border-radius: 8rpx;
		color: #fff;
		margin: 0 20rpx;
	}
	.may {
		background-color: #169bd5;
	}
	.nomay {
		background-color: #999999;
	}
	.Upopup {
		width: 580rpx;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.Utitle {
		color: #000;
		font-size: 30rpx;
	}
	.Ucode {
		width: 480rpx;
		height: 480rpx;
		margin-top: 20rpx;
	}
	.Uorder {
		color: #000;
		font-size: 28rpx;
		margin-top: 20rpx;
	}
	.Ubtn {
		width: 240rpx;
		height: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 28rpx;
		border-radius: 8rpx;
		background-color: #169bd5;
		margin-top: 20rpx;
	}
	.RefundBox {
		width: 100%;
		padding: 50rpx 30rpx 50rpx 30rpx;
		display: flex;
		flex-direction: column;
	}
	.securities {
		color: #169bd5;
		font-size: 24rpx;
		margin-right: 14rpx;
	}
	.favorable {
		width: 690rpx;
		margin: 24rpx auto 0;
		background-color: #ffffff;
		padding: 20rpx 0;
		border-radius: 10rpx;
	}
	.NumLock {
		color: #000;
		font-size: 30rpx;
		min-width: 40rpx;
		margin-right: 10rpx;
		font-family: 'Arial';
	}
</style>
